<template>
  <Table
    :table="table"
    :tableColumns="tableColumns"
    :loadTableList="loadTableList"
    :changePageSize="changePageSize"
    :changePage="changePage"
    :deleteMultipleSelectionUrl="$urls.API_URL_BACKSTAGE_WASTE_WASTEDISPOSALMAPPING_MANAGE"
    :showDeleteButton="true"
    @addRow="addRow"
    @editRow="editRow"
  >
    <!--    消纳场-->
    <template #wasteDisposalSiteName="scope">
        <span v-if="scope.row.wasteDisposalSite != null&&scope.row.wasteDisposalSite !=''">
          {{ scope.row.wasteDisposalSite.name }}
        </span>
      <span v-else></span>
    </template>
<!--    &lt;!&ndash;    测绘开始时间&ndash;&gt;-->
<!--    <template #beginTime="scope">-->
<!--        <span v-if="scope.row.beginTime != null&&scope.row.beginTime !=''">-->
<!--          {{ scope.row.beginTime }}-->
<!--        </span>-->
<!--      <span v-else></span>-->
<!--    </template>-->
<!--    &lt;!&ndash;    测绘结束时间&ndash;&gt;-->
<!--    <template #endTime="scope">-->
<!--        <span v-if="scope.row.endTime != null&&scope.row.endTime !=''">-->
<!--          {{ scope.row.endTime }}-->
<!--        </span>-->
<!--      <span v-else></span>-->
<!--    </template>-->
    <!--    DSM数字模型-->
    <template #wasteDisposalMappingPictureDsmUrl="scope">
        <span
          v-if="scope.row.wasteDisposalMappingPicture != null&&scope.row.wasteDisposalMappingPicture !=''">
          {{ scope.row.wasteDisposalMappingPicture.dsmUrl }}
        </span>
      <span v-else></span>
    </template>
  </Table>
</template>

<script lang="ts" setup>
// 导入表格组件
import Table from '@/components/base/table/Table.vue';
// 接收父组件传递过来的值
import { TableColumn, TableData } from '@/types/interface/base_interface';
import { defineProps, getCurrentInstance, ref } from 'vue';
import { WastedisposalMapping } from '@/types/interface/wastedisposal_interface';

// 接收父组件的值
interface Props {// 需要在父组件引入自定义的@/api/uem/useTableList.ts组件，然后将其中的部分属性传过来
  table: TableData, // 表格对象，包含表格数据和分页信息。表格数据实际业务并不需要，偷懒写法
  loadTableList: () => void, // 重新加载表格
  changePageSize: () => void, // 当每页数据显示数发生变化时触发的一个函数
  changePage: () => void, // 当页面发生变化时触发的一个函数
}

const props = defineProps<Props>();

const { proxy } = getCurrentInstance(); // 使用proxy代替ctx，因为ctx只在开发环境有效
// 设置表格的列
// 定义表格所有的列字段信息
const tableColumns = ref<TableColumn[]>([
  {
    label: '消纳场',
    prop: 'wasteDisposalSiteName',
    width: 250,
    fixed: true,
    type: 'custom',
  },
  {
    label: '设计填方量（单位/㎡）',
    prop: 'designEarthwork',
    width: 200,
    fixed: true,
  },
  {
    label: '当前已使用填方量（单位/㎡）',
    prop: 'usedEarthwork',
  },
  {
    label: '文字描述',
    prop: 'remake',
  },
  {
    label: '测绘开始日期',
    prop: 'beginTime',
    // type: 'custom',
  },
  {
    label: '测绘截至日期',
    prop: 'endTime',
    // type: 'custom',
  },
  {
    label: 'DSM数字模型',
    prop: 'wasteDisposalMappingPictureDsmUrl',
    type: 'custom',
  },
]);

// 点击添加按钮，由父组件来决定实现方法
const addRow = () => {
  proxy.$emit('addRow', null);
};

// 编辑按钮操作
const editRow = (row: WastedisposalMapping): void => {
  proxy.$emit('editRow', row);
};
</script>

<style scoped>

</style>
